<script setup>
import { ref } from 'vue'
import tabBarData from '@/assets/data/tabbar'
import { getAssetURL } from '@/utils/load_assets'

// 默认选中标签
const iconActive = ref(0)
</script>

<template>
  <div class="tarbar">
    <van-tabbar v-model="iconActive" active-color="#ff9645" route>
      <template v-for="(item, index) in tabBarData" :key="index">
        <van-tabbar-item :to="item.path">
          <span>{{ item.text }}</span>
          <template #icon="props">
            <img
              :src="iconActive === index ? getAssetURL(item.imageActive) : getAssetURL(item.image)"
            />
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<style lang="less" scoped>
.tarbar {
  img {
    height: 26px;
  }
}
</style>
